<template>
	
	<form @submit="submit" :data-action="`/api/reagentRenewal/save?stationId=${param.id}`">
			
			<view class="father">
				<view class="fixAuto bb middle ">
					<view class="w100">
						仪器名称
					</view>
					<view class="text-right">
						{{quipmentList[quipmentIndex]}}
						<text class="ml5 sIcon-arrowRight grey"></text>
					</view>
					
				</view>
				<picker class="op0 abs" mode="selector" :range="quipmentList" :value="quipmentIndex" @change="changeQuipment">
					<view class="op0 abs">{{quipment}}</view>
				</picker>
			</view>
			<view class="fixAuto bb middle" v-show="isOtherQuipment">
				<view class="w100">
					其他仪器名称
				</view>
				<view>
					<input type="text" name="instrumentName|仪器名称|0~100" v-model="quipment" placeholder="请输入仪器名称">
				</view>
			</view>
			
			
			
			
			<block v-for="( item , index) in list" :key="index">
				<view class="grayBg pd5"></view>
				<view class="fixAuto bb middle">
					<view class="w100">
						试剂标样名称
					</view>
					<view>
						<input type="text" :name="`x${index}.reagentName|试剂标样名称|0~100`" v-model="item.reagentName" placeholder="请输入试剂标样名称">
					</view>
					<view class="w40 text-right" @tap="remove(index)" v-if="list.length > 1">
						<view class="sIcon-subCircle main bold fz18"></view>
					</view>
				</view>
				<view class="fixAuto bb middle">
					<view class="w100">
						浓度
					</view>
					<view>
						<input type="number" :name="`x${index}.potency|浓度|amount|empty`" v-model="item.potency" placeholder="请输入浓度，选填">
					</view>
					<view class="w10 gray">%</view>
				</view>
				
				<pickDates :name="`x${index}.deadline|请选择有效期`" :value="item.deadline" @confirm="changeValue(item , index , $event)"></pickDates>
				
				<view class="fixAuto bb middle">
					<view class="w100">
						配制人
					</view>
					<view>
						<input type="text" :name="`x${index}.creator|配制人|0~100`" v-model="item.creator" placeholder="请输入配制人">
					</view>
				</view>
				
				
			</block>
			
			
			
			<view class="text-right flex ct ptb20 main" @tap="add">
				<view class="sIcon-addCircle  bold fz18 mr10"></view>
				<view>
					添加试剂标样
				</view>
			</view>
			
			
			
			<view class="plr100 pd30" :id="dates">
				<input name="total" :value="list.length" type="text" style="display: none;">
				<button form-type="submit" class="btn block rds23">
					保存记录
				</button>
			</view>
		</form>

	</layout>
</template>

<script>
	export default {
		data() {
			return {
				param:{id:""} ,
				deadline:"",
				list:[] ,
				dates : Date.now(),
				quipmentList:["COD分析仪","PH分析仪","氨氮分析仪","总磷分析仪","总氮分析仪","流量计","其他"],
				quipmentIndex : 0 ,
				quipment : "COD分析仪"
			}
		},
		computed:{
			isOtherQuipment : function(e){
				return this.quipmentList[this.quipmentIndex] == '其他' ;
			}
		},
		onLoad(params) {
			this.param = params ;
			this.add();
		},
		methods: {
			changeQuipment:function(e){
				this.quipmentIndex = e.detail.value ;
				var quipment = this.quipmentList[this.quipmentIndex] ;
				this.quipment = quipment == '其他' ? '' : quipment ;
			},
			submit:function(e){
				var data = this.form.check(e);
				if (!data) {
					return ;
				}
				console.log(data);
				this.form.submit(e , this.success );
			},
			
			success:function(e){
				this.kit.goSuccessBack("保存成功");
			},
			
			add:function(e){
				this.list.unshift({
					creator : "" ,
					deadline : "" ,
					potency : "" ,
					reagentName : "" 
				});
				console.log(this.list);
			},
			
			remove:function(e){
				if (this.list.length == 1) {
					return ;
				}
				this.list.splice(e,1);
			},
			
			changeValue:function(item,index , e){
				this.list[index].deadline = e.value ;
			},
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>